<template>
  <div>
    <el-card class="box-card">
      <el-form :label-position="loginForm" label-width="80px" :model="loginForm">
        <el-form-item label="账号">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="14">
          <el-button @click="loginUser">登录</el-button>
        </el-col>
        <el-col :span="6">
          <el-link :href="auth2CodeUrl">授权码模式</el-link>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LoginView',
  data () {
    return {
      loginForm: {
        username: null,
        password: null
      },
      auth2CodeUrl: null
    }
  },
  methods: {
    loginUser () {
      this.$router.push('/houseList')
      this.axios.post('/system/user/login').then(res => {
        window.localStorage.setItem('token', res.data.authorization)
      })
    }
  },
  created () {
    this.axios.get('/system/user/getOauth2Url').then(res => {
      this.auth2CodeUrl = res.data
    })
    const query = this.$route.query
    console.log(query)
    if (query.code) {
      this.axios.get('/system/user/auth', { params: { code: query.code } }).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          window.localStorage.setItem('token', res.data.authorization)
          this.$store.commit('setUserInfo', res.data.userInfo)
          this.$message.success('登录成功！')
          this.$router.push('/houseList')
        }
      })
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
  margin: auto;
}
</style>
